<template>
    <el-card class="box-card">
        <el-form :model="loggersForm" :inline="true">
            <el-form-item>
                <el-input v-model="loggersForm.handle_type" placeholder="操作类型"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="loggersForm.handle_description" placeholder="操作描述"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="loggersForm.order_code" placeholder="订单编号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="loggersForm.product_code" placeholder="商品编号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button>查询</el-button>
                <el-button>导出</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="loggersData" border>
            <el-table-column prop="number" label="序号" width="70"></el-table-column>
            <el-table-column prop="handle_type" label="操作类型" width="150" align="center"></el-table-column>
            <el-table-column prop="handle_description" label="操作描述" width="180" show-overflow-tooltip=true></el-table-column>
            <el-table-column prop="handle_user" label="操作人用户名" width="120" show-overflow-tooltip=true></el-table-column>
            <el-table-column prop="order_code" label="订单编号" show-overflow-tooltip=true></el-table-column>
            <el-table-column prop="product_code" label="商品编号" show-overflow-tooltip=true></el-table-column>
            <el-table-column prop="address_IP" label="IP地址" show-overflow-tooltip=true></el-table-column>
            <el-table-column prop="handle_time" label="操作时间" show-overflow-tooltip=true></el-table-column>
        </el-table>
        <el-col :span="24" class="toolPage">
            <el-pagination :current-page="page.current" :page-sizes="[10, 20, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
                :total="page.total" style="float:right" @size-change="handleSizeChange" @current-change="handlePageChange">
                </el-pagination>
        </el-col>
    </el-card>
</template>
<script>
    export default {
        data() {
            return {
                loggersForm: {
                    handle_type: '',
                    handle_description: '',
                    order_code: '',
                    product_code: ''
                },
                loggersData: [
                    {
                        number: '1',
                        handle_type: 'clean_txn_details',
                        handle_description: '查看订单: 819 详情',
                        handle_user: 'admin',
                        order_code: '568',
                        product_code: '1',
                        address_IP: '180.173.49.15',
                        handle_time: '2017年2月24日 11:38'
                    }
                ],
                page: {
                    total : 0,
                    current: 1,
                    size: 10
                }
            }
        },
        methods: {
            handleSizeChange(size) {
                this.page.size = size
                // this.loadGridData()
            },
            handlePageChange(current) {
                this.page.current = current
                // this.loadGridData()
            },
        }
    }
</script>